import React from "react";
import Child from "./Child";

export default class Input extends React.Component {
    constructor(){
        super();
        this.state = {
            val : ''
        }
        // 创建唯一 ref
        this.myRef=React.createRef();
        this.h3Ref=React.createRef();
        this.Child=React.createRef();
    }

    // 修改数据
    changeVal = (e) => {
        this.setState({
            val : e.target.value
        })
        console.log(this.state.val);
    }

    getInput=()=>{
        console.log(this.myRef.current.value);
    }

    changeColor=()=>{
        this.h3Ref.current.style.color="red";
    }

    getChild=()=>{
        console.log(this.Child.current);
        console.log(this.Child.current.state.msg);
        this.Child.current.demo();
    }
    render(){
        return(
            <div>
                <h2>受控组件: 状态受 React 管控的组件</h2>
                <h2>受控组件: input textarea select</h2>
                <p>
                   <input type="text"
                   value={this.state.val}
                   onChange={this.changeVal} /> 
                </p>
                <hr />
                <h2>非受控组件: 状态不受 React 管控的组件</h2>
                <p>
                    <input type="text"
                    ref = {this.myRef} /> <br />
                    <button onClick={this.getInput}> 获取文本框输入的值</button>
                </p>

                <h3 ref={this.h3Ref} onClick={this.changeColor}>点我改变颜色</h3>
                <hr />
                <p>
                    <button onClick={this.getChild}>点我获取子组件</button>
                </p>
                {/* 拿子组件实力 */}
                <Child ref={this.Child}/>
            </div>
        )
    }
}